<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript"
        src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);

    function UrlSearch() {
        var name, value;
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?")
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]
        var arr = str.split("&"); //各个参数放到数组里
        console.log(arr)
        for (var i = 0; i < arr.length; i++) {
            num = arr[i].indexOf("=");
            if (num > 0) {
                name = arr[i].substring(0, num);
                value = arr[i].substr(num + 1);
                this[name] = value;
            }
        }
    }

    function initData() {
        $.ajax({
            type: "GET",
            url: "http://tapi.alicharge.net/v2/test/socIR?mcu=" + this['mcu'] + '&startDate=' + this['startDate'] + '&endDate=' + this['endDate'] + '&f=' + this['f'] + '&f2=' + this['f2'],
            success: function (r) {
                if (r.resultCode == 1001) {
                    var list = r.resultModel;
                    initChart(list)
                } else {
                    alert(r.resultMessage);
                }
            },
        });
    }


    function doubleToInt(num) {
        var result = parseFloat(num);
        if (isNaN(result)) {
            alert('传递参数错误，请检查！');
            return false;
        }
        result = Math.round(num * 100) / 100;
        return result;
    }

    function timeToDate(timeSeconds) {
        var date = new Date(timeSeconds * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + ' ' + h + ':' + minute + ':' + second;
    }

    function initChart(list) {
        var useAh = []
        var irData = []
        var SOC_AHData = []
        var timeData = []
        var soc2Data = []
        var soc_PhData = []
        var sohData = []
        var powerData = []
        for (var a in list) {
            var e = list[a]
            useAh.push(doubleToInt(e.useAh))
            irData.push(doubleToInt(e.ir))
            SOC_AHData.push(doubleToInt(e.socAh))
            timeData.push(timeToDate(e.time))
            soc2Data.push(doubleToInt(e.soc2))
            soc_PhData.push(doubleToInt(e.socPH))
            sohData.push(doubleToInt(e.soh))
            powerData.push(doubleToInt(e.power))
        }

        var app = {};
        option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['useAh', 'IR', 'Power', 'SOC_AH', 'SOC_2', 'SOC_PH', 'SOH']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: timeData
                }
            ],
            yAxis: [

                {
                    type: 'value',
                    name: 'useAh',
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} Ah'
                    }
                },
                {
                    type: 'value',
                    name: 'SOC_AH',
                    min: 0,
                    max: 150,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }

            ],
            series: [
                {
                    name: 'useAh',
                    type: 'bar',
                    yAxisIndex: 0,
                    stack: 'Ah',
                    data: useAh
                },
                {
                    name: 'IR',
                    type: 'bar',
                    yAxisIndex: 0,
                    stack: 'Ah',
                    data: irData
                },
                {
                    name: 'Power',
                    type: 'bar',
                    yAxisIndex: 0,
                    stack: 'Ah',
                    data: irData
                },
                {
                    name: 'SOC_AH',
                    type: 'line',
                    yAxisIndex: 1,
                    data: SOC_AHData
                },
                {
                    name: 'SOC_2',
                    type: 'line',
                    yAxisIndex: 1,
                    data: soc2Data
                },
                {
                    name: 'SOC_PH',
                    type: 'line',
                    yAxisIndex: 1,
                    data: soc_PhData
                },
                {
                    name: 'SOH',
                    type: 'line',
                    yAxisIndex: 1,
                    data: sohData
                },
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

    UrlSearch();
    initData();


</script>
</body>
</html>